<template>
  <x-sub-page :isFixBtn="true">
    <div class="pricing-detail" v-loading="pageLoading">
      <div class="form-components">
        <div class="panl-title">
          <span>基础信息</span>
        </div>
      </div>
      <el-descriptions
        direction="vertical"
        :column="4"
        label-class-name="title-style"
        content-class-name="content-style"
      >
        <el-descriptions-item label="采购申请单号">{{ dataForm.number | emptyVal }}</el-descriptions-item>
        <!-- <el-descriptions-item label="状态">{{ this.dataForm.state }}</el-descriptions-item> -->
        <el-descriptions-item label="标题">{{ dataForm.title | emptyVal }}</el-descriptions-item>
        <el-descriptions-item label="申请人">{{ dataForm.createName | emptyVal }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{ dataForm.mobile | emptyVal }}</el-descriptions-item>
        <el-descriptions-item label="申请部门">{{ dataForm.deptName | emptyVal }}</el-descriptions-item>
        <el-descriptions-item label="采购类型">{{
          selectDictLabel(dictOptions['srm_purchase.type'], dataForm.type) | emptyVal
        }}</el-descriptions-item>
        <el-descriptions-item label="申请时间">{{ dataForm.createTime | emptyVal }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions
        direction="vertical"
        :column="1"
        label-class-name="title-style"
        content-class-name="content-style"
      >
        <el-descriptions-item label="申请说明"> {{ dataForm.remark | emptyVal }} </el-descriptions-item>
      </el-descriptions>
      <div class="form-components">
        <div class="panl-title">
          <span>申请物料信息</span>
        </div>
      </div>
      <x-table
        ref="tableCom"
        :isPagination="false"
        :data-source="dataForm.purchaseDetailList"
        :row-key="'id'"
        :height="getTableHeight(dataForm.purchaseDetailList)"
      >
        <el-table-column
          v-for="(item, index) in columns"
          :key="index"
          :prop="item.prop"
          :fixed="item.fixed"
          :show-overflow-tooltip="true"
          :width="item.width"
          :min-width="item.minWidth || '-'"
          :label="item.label"
          :sortable="'custom'"
        >
          <template #default="scope">
            <span v-if="item.prop === 'state'">{{
              selectDictLabel(dictOptions['srm_purchase_detail.state'], scope.row[item.prop]) | emptyVal
            }}</span>
            <span v-else-if="item.prop === 'materialUnit'">{{
              selectDictLabel(dictOptions['srm_material.material_unit'], scope.row[item.prop]) | emptyVal
            }}</span>
            <span v-else-if="item.prop === 'arrivalDate'">
              {{ replaceDateTime(scope.row[item.prop]) }}
            </span>
            <span v-else>{{ scope.row[item.prop] | emptyVal }}</span>
          </template>
        </el-table-column>
      </x-table>
    </div>
    <fixed-btn-area>
      <el-button @click="handleBack"> 返回 </el-button>
    </fixed-btn-area>
  </x-sub-page>
</template>

<script>
import { PermissionsMixin, QueryDictMixin, cloneDeep, selectDictLabel, replaceDateTime } from '@package/utils'
import { apiGetPurchaseDemandDetail } from '@/modules/purchaseSearchSource/api/purchaseDemand.js'
import { detailColumns } from '@/modules/purchaseSearchSource/config/purchaseApply.js'
import { EnumApiCode } from '../../../../../../globalEnum.js'

export default {
  name: 'ManagePricingDetail',
  mixins: [PermissionsMixin, QueryDictMixin],
  inject: ['closePages'],
  data() {
    return {
      pageLoading: false,
      columns: detailColumns,
      srmDictKeys: ['srm_purchase_detail.state', 'srm_purchase.type', 'srm_material.material_unit'],
      dataForm: {
        title: '',
        realName: '',
        mobile: '',
        remark: '',
        type: '',
        purchaseDetailList: []
      }
    }
  },
  mounted() {
    const {
      query: { id }
    } = this.$route
    this.getInfo(id)
    this.initDictConfig()
  },
  methods: {
    selectDictLabel,
    replaceDateTime,
    getTableHeight(arr) {
      return (arr?.length || 1) * 42 + 80 || 200
    },
    // 获取详情
    async getInfo(id) {
      const { data, code } = await apiGetPurchaseDemandDetail(id)
      if (code === EnumApiCode.Success) {
        this.$nextTick(() => {
          this.dataForm = Object.assign(this.dataForm, cloneDeep(data))
          console.log('this.dataForm', this.dataForm)
        })
      }
    },
    handleBack() {
      this.$router.go(-1)
      this.closePages()
    }
  }
}
</script>

<style lang="scss" scoped>
.pricing-detail {
  padding: 0 20px;
  overflow: auto;
  .panl-title {
    height: 45px;
    // margin: 0 16px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ededed;
    margin-bottom: 16px;
    span {
      display: inline-block;
      height: 22px;
      line-height: 22px;
      color: #171c26;
      border-left: 2px solid #4474f6;
      padding-left: 12px;
      font-size: 16px;
      font-weight: 700;
    }
  }
  ::v-deep .title-style {
    color: #707683;
    font-size: 14px;
  }
  ::v-deep .content-style {
    padding-bottom: 20px;
    color: #333;
    font-size: 14px;
  }
  .table-title {
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    color: #707683;
    font-weight: normal;
  }
}
</style>
